<template>
	<el-card class="box-card">
		<el-steps :active="0" align-center>
		  <el-step title="基础信息"></el-step>
		  <el-step title="商户位置"></el-step>
		  <el-step title="联系方式"></el-step>
		  <el-step title="门头照"></el-step>
		  <el-step title="资质信息照片上传"></el-step>
		  <el-step title="资质信息"></el-step>
		  <el-step title="银行账号信息照片上传"></el-step>
		  <el-step title="银行账号信息"></el-step>
		</el-steps>
		<el-row class="box-row">
			<el-form :model="formData" ref="formData" :rules="rules">
				<el-form-item class="title">
					<el-col :span="24">商户LOGO</el-col>
				</el-form-item>
				<ul class="el-upload-list el-upload-list--picture-card" style="position: absolute;margin-left: -230px;" v-show="haslogoImg">
					<li class="el-upload-list__item is-success">
						<img :src="logoImgUrl" alt="" class="el-upload-list__item-thumbnail">
						<i class="el-icon-close"></i>
						<span class="el-upload-list__item-actions" @click="logoImgsRemove">
							<span class="el-upload-list__item-delete"><i class="el-icon-delete"></i></span>
						</span>
					</li>
				</ul>
				<el-upload class="avatar-uploader noUploadImgList" :action="uploadUrl" :before-upload="beforeUpload" list-type="picture-card" :on-success="logoImgsPreview" :on-remove="logoImgsRemove">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-form-item prop="customerName">
					<el-input v-model="formData.customerName" placeholder="请输入商户名称" style="width:50%;margin-top:20px"></el-input>
				</el-form-item>
				<el-form-item prop="customerType">
					<el-select v-model="formData.customerType" placeholder="商户分类" style="width:50%">
						<el-option v-for="item in classifyList"  value-key="id" :key="item.id" :label="item.value" :value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="">
					<el-date-picker v-model="formData.shopStartTime" type="date" placeholder="营业开始时间" style="width:50%"></el-date-picker>
				</el-form-item>
				<el-form-item prop="">
					<el-date-picker v-model="formData.shopEndTime" type="date" placeholder="营业结束时间" style="width:50%"></el-date-picker>
				</el-form-item>
				<el-form-item prop="">
					<el-input type="textarea" :rows="5" placeholder="请输入商户简介" v-model="formData.customerBrief" style="width:50%">
					</el-input>
				</el-form-item>
			</el-form>
			<el-button type="primary" style="width:50%;margin-top: 10px;" @click="submitForm('formData')">下一步</el-button>
		</el-row>
	</el-card>
</template>

<script>
	import { upload ,metaList,customerSave,customerUpdate,customerInfo} from '@/api/getData'
	import dtime from 'time-formater'
	export default {
		data() {
			return {
				uploadUrl:"",
				haslogoImg:false,
				logoImgUrl: "",
				formData: {
					id: "",
					customerTypeId: "",
					customerTypeName:"",
					customerType:{},
					logoImgs: "",
					shopStartTime:"",
					shopEndTime:"",
					customerBrief:"",
					customerName:"",
					currentStep:"1",
				},
				classifyList:[],
				rules:{
					customerName: [
			            { required: true, message: '请输入商户名称', trigger: 'blur' },
			            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
			        ],
			        customerBrief: [
			            { required: true, message: '请输入商户简介', trigger: 'blur' },
			            { min: 10, max: 300, message: '长度在 10 到 300 个字符', trigger: 'blur' }
			        ],
			        shopStartTime: [
			            { required: true, message: '请输入营业开始时间', trigger: 'change' },
			        ],
			        shopEndTime: [
			            { required: true, message: '请输入营业结束时间', trigger: 'change' },
			        ],
			        customerType: [
			            { required: true, message: '请选择商户分类', trigger: 'change' },
			        ],
			        
				},
			}
		},
		mounted() {
			this.formData.id = this.$route.query.id;
			if(this.formData.id != undefined && this.formData.id != ""){
				this.customerInfo(this.formData.id);
			}else{
				this.metaList();
			}
			this.uploadUrl = upload;
		},
		methods: {
			async customerInfo(id) {
				const res = await customerInfo({
					id: id,
				});
				if(res.code == "0") {
					this.formData.customerTypeId = res.obj.customerTypeId;
					this.formData.customerTypeName  = res.obj.customerTypeName;
					this.formData.logoImgs  = res.obj.logoImgs;
					this.formData.shopStartTime  = res.obj.shopStartTime;
					this.formData.shopEndTime  = res.obj.shopEndTime;
					this.formData.customerBrief  = res.obj.customerBrief;
					this.formData.customerName = res.obj.customerName;
					this.logoImgUrl = res.obj.logoImgs;
					this.haslogoImg = true;
					this.metaList();
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			logoImgsRemove(file, fileList) {
				this.logoImgUrl = "";
			},
			logoImgsPreview(res, file) {
				this.haslogoImg = true;
				this.logoImgUrl = res.data;
			},
			beforeUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isPNG = file.type === 'image/png';
				const isLt1M = file.size / 1024 / 1024 < 1;
				if(!isJPG && !isPNG) {
					this.$message.error('上传头像图片只能是 JPG和PNG 格式!');
				}
				if(!isLt1M) {
					this.$message.error('上传头像图片大小不能超过 1MB!');
				}
				return(isJPG || isPNG) && isLt1M;
			},
			async metaList() {
				let _this = this;
				const res = await metaList({
					type: "kctype",
					pageSize: "500",
					pageNum: "1",
				});
				if(res.code == "0") {
					_this.classifyList = res.list.rows;
					_this.classifyList.forEach(function(item){
						if(_this.formData.customerTypeId == item.id){
							_this.formData.customerType = item;
						}
					})
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			async submitForm(formName) {
				this.$refs[formName].validate(async(valid) => {
					if(valid) {
						if(this.logoImgUrl == ""){
							this.$notify.error({
								title: '提示',
								message: "请上传商户LOGO",
								offset: 100
							});
							return false;
						}else{
							this.formData.logoImgs = this.logoImgUrl.replace(/\s/g,"");
						}
						if(typeof this.formData.shopStartTime != 'string'){
							this.formData.shopStartTime = dtime(this.formData.shopStartTime.getTime()).format('YYYY-MM-DD')
							this.formData.shopEndTime = dtime(this.formData.shopEndTime.getTime()).format('YYYY-MM-DD')
						}
						this.formData.customerTypeId = this.formData.customerType.id;
						this.formData.customerTypeName = this.formData.customerType.value;
						let res = null;
						if(this.formData.id != undefined && this.formData.id != ""){
							res = await customerUpdate(this.formData);
						}else{
							res = await customerSave(this.formData);
						}
						if(res.code == "0") {
							this.$router.push({
								path: 'businessTwo',
								query: {
									id: res.id
								}
							})
						} else {
							this.$notify.error({
								title: '错误',
								message: res.msg,
								offset: 100
							});
						}
					}
				});
			},
		},
	}
</script>

<style scoped>
	.box-card {
		margin: 0 0px;
	}
	
	.title {
		background-color: #20a0ff;
		line-height: 60px;
		font-size: 18px;
		color: #fff;
		width:50%;
		margin: 10px auto;
	}
	.box-row{
		margin: 20px auto;
		width:100%;
		text-align: center;
	}
</style>